<html>
<head>
   <script src="../../Grid/GridE.js"> </script>
</head>
<body class="Tutorial">
   <style>
      /* Tutorial shared styles */
      .Tutorial h1,.Tutorial h2,.Tutorial ul,.Tutorial .Desc,.Tutorial .Path,.Tutorial .Xml { max-height:999999px; }
      .Tutorial h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
      .Tutorial h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
      .Tutorial h3,.Tutorial h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
      .Tutorial h3 { background:#EE9; border:1px solid #DD8; }
      .Tutorial h4 { background:#BDE; border:1px solid #ACD; }
      .Tutorial a { text-decoration:underline; }      
      .Tutorial li { padding-bottom:8px; }
      .Tutorial ul { margin:6px 0px 0px 20px; font:13px Arial; }
      .Tutorial > ul { margin-left:0px; padding-left:15px; clear:both; }
      .Tutorial ul b { color:#0585B9; }
      .Tutorial .Path { font:normal 12px Arial; color:#0585B9; }
      .Tutorial .Path b { color:#D73938; }
      .Tutorial .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
      .Tutorial .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
      .Tutorial .Border { border:1px solid #dfdfdf; padding:10px 20px 10px 20px; margin:0px 8px 20px 0px; min-width:100%; box-sizing:border-box; overflow:hidden; }
      .Tutorial .Main { }

      .Tutorial .WidthP7 { width:350px; height:550px; }
   </style>

   <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Tutorials\/)([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/$4").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
   <h1>7. Server child paging in tree</h1>
   <h2>Manual paging of child rows in tree on server side</h2>

   <div class="Border" id="Border">
      <div style="float:left; margin-right:10px; margin-bottom:20px;">
         <div class="Xml">Source: 
            <a href='07-Server_child_paging.js'>07-Server_child_paging.js</a>
            &nbsp;
            <a href='07-ChildPage1001.js'>07-ChildPage1001.js</a>
            &nbsp;
            <a href='07-ChildPage1002.js'>07-ChildPage1002.js</a>
            &nbsp;...&nbsp;
            <a href='07-ChildPage75.js'>07-ChildPage75.js</a>
         </div>
         <div class="Main" style='width:661px; height:550px;'>
            <bdo Debug='check,io' DebugTag='TGDebug' DebugCheckIgnore='countR,countI' Data_Url='07-Server_child_paging.js' Page_Url='07-ChildPage*id.js' Page_Method='Get'></bdo>
         </div>
      </div>
      <div style="float:left; margin-bottom:20px;">
         <div style='float:right;'><button onclick='document.getElementById("TGDebug").innerHTML="";'>Clear</button></div>
         <div style='margin-bottom:6px;height:20px;'>Server communication</div>
         <div id='TGDebug' class="WidthP7" style='overflow:auto; background:#EEE; border:1px solid black; padding-left:3px;'></div>
      </div>
   </div>

   <ul>
      <li>
         Server side child paging is done by server script that generates the children for the parent rows on demand.<br />
         <b><i>Implementation of server child paging is not easy and requires a lot of work on server side!</i></b>, although it is simpler to implement than server root paging.
         For more information see <a href='../../Doc/PagingServer.htm'>Server paging documentation</a>.<br />
         TreeGrid provides server side DLL/SO library that provides the most of work to support the server paging, 
         but it can be used only some cases, see the <a href='../../Doc/DLL.htm'>DLL documentation</a>.<br />
      </li>
      <li>
         <h4>How server child paging works</h4><br />
         <ul>
         <li>
         On start TreeGrid downloads layout and root rows as usual without server paging, from Layout_Url and Data_Url.<br /> 
         If any row contains children, it will be handled by standard client paging, without any access to server.<br />
         If the row contains no children, but has set <h3>Count</h3> attribute to the count of expected children, it will download the children from server on demand.
         </li>
         <li>
         When the row with the <b>Count</b> attribute is expanded and becomes visible due scroll or is collapsed and is being expanded, 
         TreeGrid uploads to data source <h3>Page_Url</h3> the row identification 
         (and also the sorting, filtering, grouping and search state) and downloads back all the children rows. <br />
         If the children contain their own sub-children, they can be served similarly in both ways - normally included as children or with the <b>Count</b> attribute and downloaded on demand.<br />
         The server script should find the child rows for the parent row and return them back to the grid. 
         It can use the information about the grid state or use some data prepared in the first request for the body.<br />
         </li>
         </ul>
      </li>
      <li>
         The server child paging is set by Cfg attribute <h3>ChildPaging</h3><b>='3'</b>.<br />
         Remember, all the children for one parent must be downloaded at once, there is no server paging among row children (ChildParts cannot be set to 3).<br />
         But still is available client paging in children by Cfg attribute <b>ChildParts='2'</b>.<br />
      </li>
      <li>
         The downloaded children are automatically sorted and filtered (including filter by search) according to the actual state, but <u>not</u> grouped or searched (select, mark, find actions).<br />
      </li>
      <li>
         The server script implementing server child paging is responsible for grouping feature and summary calculations.
      </li>
      <li>
         <h4>Calculations in server child paging</h4><br />
         If the parent row contains any function for children summaries or some fixed or higher parent row aggregates children deeply, the parent row must contain results of the aggregate functions for its children. 
         Including filter application, if required.<br />
         The attribute format is ColNameFuncName='result for children'. The attribute name can be changed by appropriate attribute of the aggregate function.
      </li>
      <li>
         <h4>Static files</h4><br />
         In the most cases the children are created and served dynamically by some server script.<br />
         But it is also possible, like in this tutorial example, to load the children from static files. <br />
         For static file it is required to set Page_Method='Get'.<br />
         In this case the data source address supports wildcards according to the row identification and sorting state: *id, *Rows.<br />
      </li>
      <li>
         If set Cfg attribute <h3>RemoveCollapsed</h3><b>='3'</b>, it removes the downloaded children on every collapse and downloads them again on expand.<br />
         It is useful when data requires to be renewed and regenerated often.
      </li>
   </ul>

   <!-- Google Analytics code run once for trial -->
   <script>
      var TGTrial = document.cookie.match(/TGTrialPaging\s*=\s*(\d+)/), TGIndex = 64;
      if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
         var n = "RunTrialGridPaging7", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialPaging="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
         var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
         var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
               +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
         var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
         },100);
   </script>
</body>
</html>